<template>
    <div>
        <!-- 点击跳转 -->
        <div @click="xq">
            <van-swipe-cell :before-close="beforeClose">
                <van-card :desc="xr2.dcfy" :title="xr2.danci" class="goods-card" />
                <van-icon name="volume" class="search-icon" @click.stop="wc" />
                <template #right v-if="guanbi">
                    <van-button square type="danger" text="删除" class="delete-button" @click="shancchu()" />
                </template>
            </van-swipe-cell>

            <!--  <van-cell :title="xr2.danci" size="large" :label="xr2.dcfy" class="bk">
                <template #right-icon>
                    <van-icon name="volume" class="search-icon" @click.stop="wc" />
                </template>

            </van-cell> -->

        </div>
    </div>
</template>

<script>

import { mapMutations } from "vuex";

export default {
    // xr2:父组件dcb.vue传递的数据

    props: { xr2: {}, guanbi: {} },
    methods: {
        ...mapMutations(['shanchudc', 'chucunId']),
        // 点击时向父组件传单词,进行发音
        wc() {
            this.$emit("dc", this.xr2.danci);
        },
        xq() {
            // 向子组件路由发送数据
            console.log(this.xr2, "wf");
            // 把对应的单词,过滤出单词本id放到会话储存，供搜索使用
            this.chucunId(this.xr2)
            this.$router.push({
                path: "/dcxq",
                query: { xr2: JSON.stringify(this.xr2) },
            });
        },
        // 删除单词
        shancchu() {
            console.log(666)
        },
        beforeClose({ position, instance }) {
            switch (position) {
                case 'left':
                case 'cell':
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    this.$dialog.confirm({
                        message: '确定删除吗？',
                    }).then(() => {
                        // 获取单词本id
                        let id = JSON.parse(window.sessionStorage.getItem('dcbsj')).id
                        //   第一个参数为单词数据,第二个参数为单词本id
                        this.shanchudc([this.xr2, id])
                        console.log('删除单词', this.xr2, id)
                        instance.close();
                        // 接受报错并且隐藏
                    }).catch(() => { });
                    break;
            }
        },
    },
    created() {
        console.log(this.xr2, 'this.xr2');
    },
};
import Vue from "vue";
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
</script>
<style lang="less" scoped>
.search-icon {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 20px;
    margin-top: 15px;
}
.bk {
    border: 0.1px solid rgb(250, 249, 249);
}
.delete-button {
    height: 100%;
}
.goods-card {
    position: relative;
    margin: 0;
    background-color: white;
    height: 72px;
    border: 1px solid #f0f0f0;
    font-size: 16px;
}
.van-card__desc {
    margin-top: 14px;
}
.van-card__title {
    padding-bottom: 3px;
    left: 2px;
    font-size: 19px;
}
</style>
